<%@ page pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<fmt:bundle basename="res">
<head>
    <meta charset="utf-8">
    <title><fmt:message key='tjfxsp'/></title>
    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>
    <style>
        html {
            background: #fff;
        }

        .layui-form-label {
            width: 150px;
        }

        .layui-input-block {
            margin-left: 180px;
        }
        /*.layui-row:after {
            display: none;
        }*/
        .list {
            display: flex;
        }
        .item {
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
            width: 400px;
        }
        .item .cover {
            width: 300px;
            height: 400px;
        }
    </style>
</head>

<body>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">

    <div class="layui-container">

        <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">

            <form:form commandName="poster" method="post">

                <div class="layui-form-item">
                    <label class="layui-form-label"><fmt:message key='hblx'/></label>
                    <div class="layui-input-inline">
                        <select name="type" lay-filter="type" lay-verify="required" id="type">
<%--                            <option value="0">请选择</option>--%>
                            <option value="1" <c:if test="${poster.type == 1}">selected</c:if> ><fmt:message key='lx'/></option>
                            <option value="2" <c:if test="${poster.type == 2}">selected</c:if> ><fmt:message key='sp'/></option>
                            <option value="3" <c:if test="${poster.type == 3}">selected</c:if> ><fmt:message key='wd'/></option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item layui-hide layout2">
                    <label class="layui-form-label"><fmt:message key='xzhbbj'/></label>
                    <div class="layui-input-block">
                        <div class="list">
                            <div class="item">
                                <div class="cover">
                                    <img src="${web_domain}/resources/images/1.png" style="width: 300px;height: 400px;">
                                </div>
                                <input type="radio" name="layout" value="1" title="<fmt:message key='bu1'/>" <c:if test="${poster.layout == 1}">checked</c:if> >
                            </div>
                            <div class="item">
                                <div class="cover">
                                    <img src="${web_domain}/resources/images/2.png" style="width: 300px;height: 400px;">
                                </div>
                                <input type="radio" name="layout" value="2" title="<fmt:message key='bu2'/>" <c:if test="${poster.layout == 2}">checked</c:if>>
                            </div>
                            <div class="item">
                                <div class="cover">
                                    <img src="${web_domain}/resources/images/3.png" style="width: 300px;height: 400px;">
                                </div>
                                <input type="radio" name="layout" value="3" title="<fmt:message key='bu3'/>" <c:if test="${poster.layout == 3}">checked</c:if>>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item layout3">
                    <label class="layui-form-label"><fmt:message key='xzhbbj'/></label>
                    <div class="layui-input-block">
                        <div class="list">
                            <div class="item">
                                <div class="cover">
                                    <img src="${web_domain}/resources/images/4.png" style="width: 300px;height: 400px;">
                                </div>
                                <input type="radio" name="layout" value="1" title="<fmt:message key='bu1'/>" <c:if test="${poster.layout == 1}">checked</c:if>>
                            </div>
                            <div class="item">
                                <div class="cover">
                                    <img src="${web_domain}/resources/images/5.png" style="width: 300px;height: 400px;">
                                </div>
                                <input type="radio" name="layout" value="2" title="<fmt:message key='bu2'/>" <c:if test="${poster.layout == 2}">checked</c:if>>
                            </div>
                            <div class="item">
                                <div class="cover">
                                    <img src="${web_domain}/resources/images/6.png" style="width: 300px;height: 400px;">
                                </div>
                                <input type="radio" name="layout" value="3" title="<fmt:message key='bu3'/>" <c:if test="${poster.layout == 3}">checked</c:if>>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='bjt'/></label>
                    <div class="layui-input-inline" style="width: 70%;">
                        <form:hidden path="background" lay-verify="required"/>
                        <a type="button" id="chooseImage" class="layui-btn layui-btn-sm layui-btn-normal"><fmt:message key='sctp'/></a>
                        <div id="imageBox">
                            <c:if test="${not empty poster.background}">
                                <img class="preview" src="${store_domain}/uploads/${poster.background}" style="width:180px; margin-top:10px;">
                            </c:if>
                            <c:if test="${empty poster.background}">
                                <img src="${web_domain}/resources/images/default.jpeg" style="width:120px;height:120px;margin-top:10px;">
                            </c:if>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: red;">*</span><fmt:message key='wz'/></label>
                    <div class="layui-input-inline" style="width: 70%">
                        <form:input class="layui-input" lay-verify="required" path="text"/>
                    </div>
                    <div style="margin-right:135px;padding-left: 180px">
                        <span style="">
                            <fmt:message key='wznrkyxmblm'/>：
                            【$nickname】<fmt:message key='bsyhnc'/>
                            【$productname】<fmt:message key='bsspmz'/>
                            【$shopname】<fmt:message key='bsfxwdm'/>
                        </span>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: red;">*</span><fmt:message key='sm'/></label>
                    <div class="layui-input-inline" style="width: 70%">
                        <form:textarea path="content" cols="108" rows="7"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><fmt:message key='yl'/></label>
                    <div class="layui-input-inline" style="width: 70%">
                        <input type="button" class="layui-btn layui-btn-sm layui-btn-normal preview-poster" value="<fmt:message key='yl'/>">
                        <form:hidden path="image"/>
                        <div>
                            <img class="preview preview-img" src="" style="width:300px; margin-top:10px;">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item layui-hide">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline">
                        <input type="button" value="<fmt:message key='qd'/>" id="submit" class="layui-btn">
                    </div>
                </div>

            </form:form>
        </div>
    </div>
</div>

<div style="display: none;">
    <form action="${web_domain}/upload/image" method="post" id="uploadImage" enctype="multipart/form-data">
        <input id="uploadImageFile" name="file" type="file" accept="image/*"/>
    </form>
</div>

<script>

    layui.use(['form', 'layer'], function () {

        var layer = layui.layer;
        var form = layui.form;

        $("#chooseImage").click(function () {
            $("#uploadImageFile").click();
        });

        $(".preview-poster").click(function () {
            var type = $("#type").val();
            var layout = $("[name='layout']:checked").val();
            var background = $("#background").val();
            var text = $("#text").val();

            if (!type) {
                layer.msg("<fmt:message key='qxzhblx'/>");
                return;
            }

            if (!layout) {
                layer.msg("<fmt:message key='qxzhbbj'/>");
                return;
            }

            if (!background) {
                layer.msg("<fmt:message key='qscbjtp'/>");
                return;
            }

            if (!text) {
                layer.msg("<fmt:message key='qtxwz'/>")
                return;
            }

            feijin.get({
                url: "${web_domain}/mall/distribution/poster/preview?type=" + type + "&layout=" + layout + "&background=" + background + "&text=" + text,
                success: function (res) {
                    if(res.status) {
                        $(".preview-img").attr("src", res.url);
                        $("#image").val(res.name);
                    } else {
                        layer.msg("<fmt:message key='scyltpyc'/>");
                    }
                }
            })
        });

        $("#uploadImageFile").change(function () {
            $("#uploadImage").ajaxSubmit({
                dataType: "JSON",
                success: function (result) {
                    if (result.status) {
                        $("#background").attr("value", result.path);
                        $("#imageBox").html("<img class='preview' src='${store_domain}/uploads/" + result.path + "' style='width:120px;height:120px;margin-top:10px;' />'");
                    }
                },
                error: function (result) {
                    console.log(result.responseText);
                }
            });
        });

        form.on('select(type)', function(data){
            if (data.value == 1 || data.value == 3){
                $(".layout2").addClass("layui-hide");
                $(".layout3").removeClass("layui-hide");
            }else if (data.value == 2){
                $(".layout2").removeClass("layui-hide");
                $(".layout3").addClass("layui-hide");
            }
        });

        form.on('radio(distributorScope)', function (e) {
            if (e.value === "1") {
                $(".select-distributor").addClass("layui-hide");
            } else {
                $(".select-distributor").removeClass("layui-hide");
            }
        });


        $("#submit").click(function () {

            $("#poster").ajaxSubmit({
                success: function (res) {
                    if (res.status) {
                        layer.alert("<fmt:message key='bccg'/>", function () {
                            parent.location.reload();
                        });
                    } else {
                        layer.alert(res.message);
                    }
                }
            });
        });
    })
    ;

</script>

</body>
</fmt:bundle>
</html>